<template>
  <div>
    <van-nav-bar title="书籍信息">
      <template #left>
        <van-icon
          name="arrow-left"
          class="icon"
          size="20"
          @click="onClickLeft"
        />
      </template>
    </van-nav-bar>
    <div class="bg"></div>
    <div class="bar_item">
      <div class="left1">
        <div class="image1">
          <img src="../../../assets/img/mime.png" />
        </div>
        <div class="text1">名称</div>
      </div>
      <div class="item">
        <input
          type="text"
          placeholder="请输入你要修改的名称"
          v-model="username"
          @blur="blur"
        />
      </div>
      <div class="right1">
        <img src="../../../assets/img/modify.png" />
      </div>
    </div>
    <div class="bar_item">
      <div class="left1">
        <div class="image1">
          <img src="../../../assets/img/address.png" />
        </div>
        <div class="text1">取书地址</div>
      </div>
      <div class="item">
        <input
          type="text"
          placeholder="请输入你要修改的地址"
          v-model="address"
          @blur="blur"
        />
      </div>
      <div class="right1">
        <img src="../../../assets/img/modify.png" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: this.$store.state.userInfo.username,
      address: this.$store.state.userInfo.address,
    };
  },
  methods: {
    async blur() {
      let { token } = this.$store.state;
      let res = await this.$http({
        url: "/users",
        method: "POST",
        data: {
          username: this.username,
          address: this.address,
        },
        headers: {
          Authorization: token,
        },
      });
      if (res.status !== 200) {
        this.$toast({
          message: "修改信息失败",
        });
        return;
      }
      let { userInfo } = this.$store.state;
      userInfo.username = this.username;
      userInfo.address = this.address;
      this.$store.commit("setUserInfo", { userInfo });
      this.$toast({
        message: res.message,
      });
    },
    onClickLeft() {
      this.$router.back();
    },
  },
};
</script>

<style scoped>
.icon {
  color: #808080;
}
input {
  border: none;
}
.bg {
  background-color: #e7e6e6;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}
.bar_item {
  margin-top: 1.875rem;
  background-color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-right: 0.9375rem;
}
.bar_item .left1 {
  display: flex;
  align-items: center;
  padding: 0.3125rem;
  padding-left: 0.9375rem;
}
.text1 {
  font-size: 0.75rem;
  margin-left: 0.375rem;
  width: 3.125rem;
}
.left1 .image1 img {
  width: 1.5625rem;
  height: 1.5625rem;
}
.right1 img {
  width: 1.5625rem;
  height: 1.5625rem;
}
</style>